<template>
  <VPage class="app-container">
    <VTable ref="tableRef" v-bind="tableOptins" @checkboxRecords="checkboxRecords">
      <template #form="{ form }">
        <SelectImporter
          v-model="form.importer_id"
          placeholder="授权代表公司"
        ></SelectImporter>
        <el-select v-model="form.status" placeholder="状态" class="!w-[160px]" clearable>
          <el-option
            v-for="item in options.statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select v-model="form.type" class="!w-[160px]" placeholder="类型" clearable>
          <el-option
            v-for="item in options.typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <SelectCountry v-model="form.country_id" placeholder="国家"></SelectCountry>
        <el-select
          v-model="form.platform_id"
          placeholder="平台"
          class="!w-[160px]"
          @change="changePlatform($event, form)"
        >
          <el-option
            v-for="item in platformOptions"
            :key="item.platform_id"
            :label="item.platform_name"
            :value="item.platform_id"
          />
        </el-select>
        <el-select
          v-model="form.shop_ids"
          placeholder="店铺"
          class="!w-[200px]"
          multiple
          @change="changeStore"
        >
          <el-option
            v-for="item in shopOptions"
            :key="item.shop_id"
            :label="item.shop_name"
            :value="item.shop_id"
          />
        </el-select>
        <select-brand
          class="!w-[200px]"
          v-model="form.brand_ids"
          :multiple="true"
          placeholder="品牌"
        ></select-brand>
      </template>
      <template #toolbar_btns>
        <VButton auth="/goods/basics/trade-agent/add" type="primary" @click="open()"
          ><svg-icon icon-class="add_new" />新增</VButton
        >
        <VButton
          auth="/goods/basics/trade-agent/maintenance"
          type="primary"
          @click="openImporter()"
          >授权代表公司维护</VButton
        >
      </template>
    </VTable>
    <ComModal ref="addref" @query="query" :options="options.typeList"></ComModal>
    <importer
      ref="importerRef"
      :options="options.typeList"
      @query="queryImporter"
    ></importer>
    <VLog ref="logRef" options="tradeAgentId" :api="getTradeAgentLog"></VLog>
  </VPage>
</template>

<script setup lang="jsx" name="BasicsTrade-agent">
import { ElMessage, ElMessageBox } from "element-plus";
import ComModal from "./components/ComModal.vue";
import { getOption, getShop } from "@/api/index.js";
import { queryTradeAgentList, deleteTradeAgent, getTradeAgentLog } from "./api";
import importer from "./components/importer";
import VLog from "@/components/VLog";
import SelectCountry from "@/components/SelectCountry";
import SelectImporter from "@/components/SelectImporter";
import SelectBrand from "@/components/SelectBrand";
import useCommonStore from "@/store/modules/common";

const commonStore = useCommonStore();
const platformOptions = computed(() => {
  if (!commonStore.platformOptions) {
    commonStore.getPlatformList();
  }
  return commonStore.platformOptions;
});

import { toRefs } from "vue";
const tableRef = ref();
const addref = ref(null);
const records = ref([]);

const loadings = reactive({
  enable: false,
  disable: false,
  del: false,
});

const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  rowConfig: {
    height: 52,
  },
  columns: [
    { field: "id", title: "ID", width: 60 },
    {
      field: "platform_name",
      title: "平台",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return <div>{row.platform_name}</div>;
        },
      },
    },
    { field: "shop_ids_text", title: "店铺", minWidth: 100 },
    { field: "brand_ids_text", title: "品牌", minWidth: 100 },
    {
      field: "base_trade_agent_country",
      title: "国家",
      minWidth: 220,
      slots: {
        default: ({ row }) => {
          const country = [];
          row.base_trade_agent_country.length &&
            row.base_trade_agent_country.map((i) => {
              country.push(i.country_name);
            });
          return (
            <div>
              <vText value={country.toString()}></vText>
            </div>
          );
        },
      },
    },
    {
      field: "type",
      title: "类型",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return <div>{row.base_importer?.type == 1 ? "欧代" : "英代"}</div>;
        },
      },
    },
    {
      field: "importer_company_name",
      title: "授权代表公司",
      minWidth: 110,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <vText value={row.base_importer?.importer_company_name}></vText>
            </div>
          );
        },
      },
    },
    {
      field: "address",
      title: "公司地址地址",
      minWidth: 220,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {row.base_importer.province}
              {row.base_importer.city}
              {row.base_importer.area}
            </div>
          );
        },
      },
    },
    {
      field: "address",
      title: "详细地址",
      minWidth: 220,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <vText value={row.base_importer?.address}></vText>
            </div>
          );
        },
      },
    },
    {
      field: "email",
      title: "电子邮件",
      minWidth: 160,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <vText value={row.base_importer?.email}></vText>
            </div>
          );
        },
      },
    },
    {
      field: "type_cn",
      title: "联系电话",
      minWidth: 120,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              <vText value={row.base_importer?.telephone}></vText>
            </div>
          );
        },
      },
    },
    {
      field: "remark",
      title: "备注",
      showOverflow: "title",
      minWidth: 100,
      slots: {
        default: ({ row }) => {
          return <div class="overflow-ellipsis overflow-hidden">{row.remark}</div>;
        },
      },
      width: 160,
    },
    {
      field: "status_cn",
      title: "状态",
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex items-center">
              {row.status == 1 ? (
                <svg-icon class="mr-1 base-text-color" icon-class="state_finish_enable" />
              ) : (
                <svg-icon class="mr-1 text-red-500" icon-class="state_finish_cover" />
              )}{" "}
              {row.status == 1 ? "启用" : "禁用"}
            </div>
          );
        },
      },
      width: 95,
    },
    { field: "create_time", title: "创建时间", width: 180 },

    {
      title: "操作",
      fixed: "right",
      width: 140,
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex justify-center">
              <VButton
                auth="/goods/basics/trade-agent/edit"
                type="primary"
                link
                onClick={() => open(row.id)}
              >
                编辑
              </VButton>
              <VButton
                auth="/goods/basics/trade-agent/delete"
                type="danger"
                link
                onClick={() => handleDelete(row.id)}
              >
                删除
              </VButton>
              <el-button type="primary" link onClick={() => showLog(row.id)}>
                日志
              </el-button>
            </div>
          );
        },
      },
    },
  ],

  proxyConfig: {
    props: {
      result: "data",
      total: "total",
    },
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => queryTradeAgentList({ ...form, ...page }),
    },
  },
});
// 列表数据

onMounted(() => {
  fetchOption();
});
const query = () => {
  tableRef?.value.query();
};

const data = reactive({
  options: {
    typeList: [],
  },
  shopOptions: [],
});
const { options, shopOptions } = toRefs(data);

const fetchOption = () => {
  // option不同接口判断
  getOption("brand").then((res) => {
    options.value = res.data;
  });
};

const open = (id) => {
  nextTick(() => {
    addref.value.open(id);
  });
};

const importerRef = ref();
const openImporter = () => {
  nextTick(() => {
    importerRef.value.open();
  });
};

const logRef = ref();
const showLog = (id) => {
  logRef.value.open(id);
};

const handleDelete = (id) => {
  ElMessageBox.confirm("此操作将删除该项, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    confirmButtonClass: "btnFalses",
  }).then(() => {
    deleteTradeAgent({ id }).then((res) => {
      query();
      ElMessage.success(res.message);
    });
  });
};

const queryImporter = () => {
  commonStore.getImporterList();
};

const changePlatform = async (val, form) => {
  const item = platformOptions.value.find((i) => i.platform_id == val);
  try {
    const res = await getShop({
      platform_ids: [val],
    });
    form.shop_ids = "";
    shopOptions.value = res.data;
  } catch (e) {
    throw Error(e);
  }
};
</script>
